<template>
    <div class="bread">
        <ul class="bre-crumb">
            <li>
                <a class="el-tabs__item  is-active" href="">工作台</a>
            </li>
        </ul>
        <ul class="bre-tag">
            <li v-for="(item, index) in levelList" :key="index">
                <a v-if="levelList.length > 1" class="el-tabs__item  is-active" >{{ item }} <i @click="deleteTag(index)">&nbsp;&nbsp;&nbsp;
                        x</i></a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            levelList: []
        }
    },
    watch: {
        $route() {
            this.getBreadcrumb()
        }
    },
    created() {
        this.getBreadcrumb()

    },
    mounted() {
        this.clearLevelList()
    },
    methods: {
        getBreadcrumb() {
            // only show routes with meta.title
            console.log(this.$route.matched, '00')
            console.log(this.levelList, '11')
        
                this.$route.matched.forEach((item) => {
                    if (this.levelList.indexOf(item.meta.title) === -1 
                    && item.meta.title != '' && item.meta.title !=undefined && item.meta.title != '系统管理'  && item.meta.title !='邮件管理'
                    ) {
                        this.levelList.push(item.meta.title)
                    }
                })

        

            //   if (!this.isDashboard(first)) {
            //     matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
            //   }

            //   this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
        },
        // isDashboard(route) {
        //   const name = route && route.name
        //   if (!name) {
        //     return false
        //   }
        //   return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
        // },
        // pathCompile(path) {
        //   // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
        //   const { params } = this.$route
        //   var toPath = pathToRegexp.compile(path)
        //   return toPath(params)
        // },
        // handleLink(item) {
        //   const { redirect, path } = item
        //   if (redirect) {
        //     this.$router.push(redirect)
        //     return
        //   }
        //   this.$router.push(this.pathCompile(path))
        // },
        deleteTag(index){          
                this.levelList.splice(index,1)
                if(this.levelList==[]){
                    this.$router.push('/admin/dashboard')
                }else{
                    this.$router.back(1)
                }
        },
        //清空this.clearLevelList()
        clearLevelList(){
            this.levelList=[]   
        }
    }

}
</script>
<style lang="scss" scoped>
li {
    list-style: none;
}

.bread {
    padding: 10px 0;
    background-color: #f5f7f9;
    display: flex;
    list-style: none;

    .el-tabs__item {
        margin: 0;
        background-color: #fff;
        border: 1px solid #eee;
    }

    ul {
        margin: 0;
        padding: 0;

    }

    .bre-crumb {
        margin-left: 20px;

        li {
            margin-right: 5px;
        }

    }

    .bre-tag {
        display: flex;

        li {
            margin-right: 5px;
        }
    }


}
</style>
